<template>
  <div class="top">
    <span style="color: #757575;margin-top: 4px">热门：</span>
    <div>
      <el-tag
          v-for="tag in hotTagList"
          :key="tag.id"
          style="margin-right: 8px;cursor: pointer"
          type="success"
          size="large"
          @click="toHeritageList(tag.name)"
      >
        {{ tag.name }}
      </el-tag>
    </div>
  </div>
  <div class="middle" style="height: 55vh">
    <el-carousel trigger="click" height="500px">
      <el-carousel-item v-for="src in adImages" :key="src">
        <el-image style="width: 100%; height: 100%" :src="src" fit="fill"/>
      </el-carousel-item>
    </el-carousel>
    <div class="middle-right">
      <el-image style="width: 50%; height: 50%" src="../../public/ad/heritage4.jpg" fit="fill"/>
      <el-image style="width: 50%; height: 50%" src="../../public/ad/heritage5.jpg" fit="fill"/>
      <el-image style="width: 100%; height: 50%" src="../../public/ad/heritage6.jpg" fit="fill"/>
    </div>
    <div>

    </div>
  </div>
  <div class="bottom">
    <h2>热门非遗</h2>
    <el-row>
      <el-col
          :span="8"
          v-for="heritage in hostHeritageList"
          :key="heritage.id"
      >
        <el-card
            shadow="hover"
            style="width: 300px;cursor: pointer"
            @click="router.push({
              name:'heritageDetail',
              params:{
                id:heritage.id
              }
            })"
        >
          <el-popover
              placement="top-start"
              effect="dark"
              :width="200"
              trigger="hover"
              :content="heritage.name"
          >
            <template #reference>
              <span style="cursor: pointer">{{ heritage.tempName }}</span>
            </template>
          </el-popover>
          <el-tag color="#228B22" style="color: #fff">
            {{ heritage.categoryName }}
          </el-tag>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref, getCurrentInstance} from 'vue'
import {useRouter} from "vue-router"

const {proxy} = getCurrentInstance()
const router = useRouter()
const hotTagList = ref([])
const adImages = ref(["../../public/ad/heritage1.jpg", "../../public/ad/heritage2.jpg", "../../public/ad/heritage3.jpg"])
const hostHeritageList = ref([])

//点击热门分类路由到非遗列表页
const toHeritageList = (name) => {
  router.push({
    name: 'HeritageList',
    query: {
      categoryName: name
    }
  })
}


//初始化参数
const initData = () => {
  //获取热门非遗分类列表 √
  proxy.request.get('/api/category/queryHotCategoryList').then(res => {
    if (res.code === '1'){
      hotTagList.value = res.data
    }
  })
  //获取热门非遗列表
  proxy.request.get('/api/heritage/queryHotHeritageList').then(res => {
    if (res.code === '1') {
      hostHeritageList.value = res.data.map(heritage => {
        heritage.tempName = heritage.name.length > 6 ? heritage.name.substring(0, 6) + '...' : heritage.name
        return heritage
      })
    }
  })
}
initData()
</script>

<style lang="less" scoped>
.bottom {
  .el-row {
    .el-card {
      .el-tag {
        float: right;
      }

      margin-bottom: 15px;
    }

    margin-top: 10px;
  }

  margin-top: 20px;
}

.middle {
  .middle-right {
    width: 65%;
    margin-left: 10px;
  }

  .el-carousel {
    width: 550px;
  }

  width: 100%;
  margin-top: 30px;
  display: flex;
}

.top {
  display: flex;
}
</style>